<template>
	<view class="app-components-goods-layout-form-radio">
		<view class="app-components-goods-layout-form-radio__title e-flex e-flex-items-start">
			<view class="e-flex-1 e-flex e-flex-items-start">
				<text class="c-red e-p-r-8" v-if="info.hasRequired === 0">*</text>
				<text v-if="index">{{ index }}.</text>
				<view class="e-flex-1">
					<rich-text :nodes="info.title"></rich-text>
				</view>
			</view>
			<view class="e-p-l-20 text-nowra" v-if="totalPrice">
				<text class="c-red">
					{{ unitEn }}
					{{ priceFormat(totalPrice, 2) }}
				</text>
			</view>
		</view>
		<view class="app-components-goods-layout-form-radio__sub-title" v-if="info.illustrate">
			<rich-text :nodes="info.illustrate"></rich-text>
		</view>
		<view class="e-m-b-10" v-else></view>
		<FormItemImg :info="info" />
		<e-radio-group v-model="form.formOptionsInfoId" :activeColor="AppSkin.primary" placement="column">
			<view v-for="item in info.formOptionsInfo" :key="item.id">
				<view class="e-p-t-16 e-p-b-16">
					<e-radio :name="`${item.id}`" :label="item.infoText">
						
					</e-radio>
					<FormItemImg :info="item" />
				</view>
				<view class="e-p-l-32" v-if="item.vleid === 'other' && form.formOptionsInfoId === `${item.id}`">
					<input class="app-components-goods-layout-form-radio__input" v-model="form.formOptionsInfoIdText" :placeholder="$t('public.请输入')" />
				</view>
			</view>
		</e-radio-group>

		<view class="app-components-goods-layout-form-radio__error e-flex" v-if="message">
			<image src="/static/layoutForm/error.png" class="img-40 e-m-r-22" />
			<text class="c-red">{{ message }}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, toRef, inject, onMounted, onBeforeUnmount } from 'vue';
import type { GoodsFormRadioOption, LayoutFormModelValue } from '@/typings';
import FormItemImg from './formItemImg';
import { goodsLayoutFormContextKey } from '../tokens';
import type { GoodsLayoutFormItemContext } from '../tokens';
import { priceFormat, isString, accAdd } from '@/common/utils';
import { useInit } from '@/common/stores';
import { storeToRefs } from 'pinia';

const props = withDefaults(
	defineProps<{
		value: LayoutFormModelValue;
		index: number;
		info: GoodsFormRadioOption;
		unitEn: string;
	}>(),
	{}
);
const emit = defineEmits(['update:value']);
const { AppSkin } = storeToRefs(useInit());

const message = ref('');

const formContext = inject(goodsLayoutFormContextKey);

const form = computed({
	get() {
		return (
			props.value.find((item) => item.formOptionsId === props.info.id) || {
				formOptionsId: props.info.id,
				formOptionsInfoId: '',
				formOptionsInfoIdText: '',
				vleid: '',
				vle: ''
			}
		);
	},
	set(v) {
		const list = [...props.value];
		const index = props.value.findIndex((item) => item.formOptionsId === props.info.id);
		if (index > -1) {
			list.splice(index, 1, v);
		} else {
			list.push(v);
		}
		emit('update:value', list);
	}
});

watch(
	() => form.value.formOptionsInfoId,
	() => {
		message.value = '';
	}
);

const totalPrice = computed(() => {
	let total = 0;
	props.info.formOptionsInfo.some((items) => {
		if (isString(form.value.formOptionsInfoId) && form.value.formOptionsInfoId === `${items.id}`) {
			total = accAdd(total, formContext?.getPrice?.(items) || 0);
			return true;
		}
		return false;
	});
	return total;
});

const context: GoodsLayoutFormItemContext = reactive({
	info: toRef(props, 'info'),
	message,
	form,
	totalPrice
});

onMounted(() => {
	formContext?.addField(context);
});
onBeforeUnmount(() => {
	formContext?.removeField(context);
});
</script>

<style lang="scss" scoped>
@include appBem_b(components-goods-layout-form-radio) {
	padding: 20rpx 30rpx 30rpx 30rpx;
	@include appBem_e(title) {
		padding: 20rpx 0;
		font-size: 32rpx;
	}

	@include appBem_e(sub-title) {
		margin-bottom: 20rpx;
	}
	@include appBem_e(input) {
		height: 74rpx;
		line-height: 74rpx;
		border: none;
		width: 100%;
		padding: 0 22rpx;
		font-size: 28rpx;
	}
	@include appBem_e(error) {
		margin-top: 10rpx;
		padding: 0 16rpx;
	}
}
</style>
